<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
	<script src="../../jsrender.js" type="text/javascript"></script>
	<script src="../../jquery.observable.js" type="text/javascript"></script>
	<script src="../../jquery.views.js" type="text/javascript"></script>
	<link href="../resources/demos.css" rel="stylesheet" type="text/css" />
	<link href="../resources/masterdetail2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="nav"><a href="../demos.html">JsViews Demos</a></div>

<h3>Fully editable data: Change events with templates and data-Linked elements</h3>

<br />
<div class="subhead">Example of data-linking:</div>
<pre>
...
&lt;td>
    &lt;span data-link="#index + 1">&lt;/span>:
    &lt;span data-link="title">&lt;/span>
&lt;/td>
...
</pre>

<div class="buttons">
	<button onclick="showData()">show data</button>
	<button onclick="deleteLastLanguage()">delete last language</button>
</div>

<div class="comment">Click to select and edit</div>

<div id="movieList"></div>

<script id="movieTemplate" type="text/x-jsrender">
	<table>
		<thead><tr><th>Title</th><th>Languages</th><th><span class="addMovie">Add</span></th></tr></thead>
		<tbody class="movies">
			{^{for movies}}
				<tr class="hover" data-link="css-background-color{:~bgColor()}">
					<td>
						<span data-link="#index + 1"></span>:
						<span data-link="title"></span>
					</td>
					<td>
						{^{for languages}}
							<div data-link="name"></div>
						{{/for}}
					</td>
					<td>
						<img class="removeMovie" src="../resources/close.png" />
					</td>
				</tr>
			{{/for}}
		</tbody>
	</table>

	<div class="detail">
		{^{for movies[selectedIndex]}}
			<div>
				<div class="title">Title:</div>
				<div><input data-link="title" /></div>
				<div class="title">Languages: <span class="addLanguage">Add</span></div>
				<div>
					{^{for languages}}
						<input data-link="name" /><img class="removeLanguage" src="../resources/close.png" />
					{{/for}}
				</div>
			</div>
		{{/for}}
	</div>
</script>

<script type="text/javascript">
	var counter = 0,
		movies = [
			{
				title:"Meet Joe Black",
				languages: [
					{ name: "English" },
					{ name: "French" }
				]
			},
			{
				title:"Eyes Wide Shut",
				languages: [
					{ name: "German" },
					{ name: "French" },
					{ name: "Spanish" }
				]
			}
		],
		app = {
			selectedIndex: null,
			movies: movies,
			select: function select(index) {
				if (this.selectedIndex !== index) {
					$.observable(this).setProperty("selectedIndex", index);
				}
			}
		};

	$.templates({
		movieTmpl: {
			markup: "#movieTemplate",
			helpers: {
				bgColor: bgColor,
			}
		}
	});

	function bgColor() {
		return (this.ctx.root.selectedIndex === this.index) ? "yellow" : (this.index%2 ? "#fdfdfe" : "#efeff2");
	}
	bgColor.depends = "~root.selectedIndex"

	$.link.movieTmpl("#movieList", app)
		.on("click", ".addMovie", function() {
			$.observable(movies).insert(movies.length, {
				title: "NewTitle" + counter ,
				languages: [
					{ name: "NewLanguage" + counter++ }
				]}
			);
			// Set selection on the added item
			app.select($.view(".movies tr:last").index);
		})

		.on("click", ".movies tr", function() {
			app.select($.view(this).index);
		})

		.on("click", ".removeMovie", function() {
			app.select();
			$.observable(movies).remove($.view(this).index, 1);
			return false;
		})

		.on("click", ".addLanguage", function() {
			var languages = $.view(this).data.languages;
			$.observable(languages).insert(languages.length, {
				name: "NewLanguage" + counter++
			});
		})

		.on("click", ".removeLanguage", function() {
			var view = $.view(this);
			$.observable(view.parent.data).remove(view.index, 1);
			return false;
		});

	function deleteLastLanguage() {
		if (movies.length) {
			var languages = movies[ movies.length - 1 ].languages;
			$.observable(languages).remove(languages.length - 1, 1);
		}
	}
</script>

<!--================ End of Demo Section ================-->

<!--Console-->

<script id="showData" type="text/x-jsrender">
	<div><b>Movie:</b> {{>title}} <b>Languages:</b> {{for languages}} {{>name}}{{/for}}</div>
</script>

<div id="console">
</div>

<script type="text/javascript">
	function showData() {
		$("#console").append("<hr/>");
		$("#console").append($("#showData").render(movies));
	}
</script>

</body>
</html>
